<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>电梯物联网智慧服务平台</title>
    <link th:href="@{/css/indexStyle.css}" rel="stylesheet"/>
</head>

<body onload="init()">
<div class="allBg">
    <div class="flex  content">
        <!-- TX地图 -->
        <div id="container" style="height: 70%;width: 1450px;position: absolute;top: 230px;left: 100px;right: 100px;"></div>
        <!-- 左侧 -->
        <div class="contentLeft">
            <div class="weather flex flexCenter">
                <div class="flex flexCenter waterItem">
                    <img th:src="@{/img/index/calendar.png}" alt="">
                    <p class="text">2020.11.27</p>
                </div>
                <div class="flex flexCenter waterItem">
                    <img th:src="@{/img/index/week.png}" alt="">
                    <p class="text">星期四</p>
                </div>
                <div class="flex flexCenter waterItem">
                    <img th:src="@{/img/index/weather.png}" alt="">
                    <p class="text">多云</p>
                </div>
            </div>
            <div class="leftContain">
                <div>
                    <div class="moduleTitle flex flexCenter">
                        <img th:src="@{/img/index/titleText.png}" alt="" class="textBottom">
                        <img th:src="@{/img/index/titleIcom.png}" alt="" class="titleIcon">
                        <p class="titleText">维保统计</p>
                    </div>
                    <div class="tablesd">
                        <div class="Thead flex flexCenter">
                            <p>区域</p>
                            <p>待保养</p>
                            <p>已保养</p>
                            <p>逾期</p>
                        </div>
                        <div class="tBody ">
                            <div class="BodyItem flex flexCenter">
                                <p>西安市</p>
                                <p>456</p>
                                <p>231</p>
                                <p>12</p>
                            </div>
                            <div class="BodyItem flex flexCenter">
                                <p>咸阳市</p>
                                <p>523</p>
                                <p>235</p>
                                <p>21</p>
                            </div>
                            <div class="BodyItem flex flexCenter">
                                <p>渭南市</p>
                                <p>42</p>
                                <p>122</p>
                                <p>24</p>
                            </div>
                            <div class="BodyItem flex flexCenter">
                                <p>延安市</p>
                                <p>125</p>
                                <p>120</p>
                                <p>124</p>
                            </div>
                            <div class="BodyItem flex flexCenter">
                                <p>宝鸡市</p>
                                <p>123</p>
                                <p>120</p>
                                <p>325</p>
                            </div>
                            <div class="BodyItem flex flexCenter">
                                <p>汉中市</p>
                                <p>125</p>
                                <p>120</p>
                                <p>14</p>
                            </div>
                            <div class="BodyItem flex flexCenter">
                                <p>安康市</p>
                                <p>521</p>
                                <p>475</p>
                                <p>21</p>
                            </div>
                            <div class="BodyItem flex flexCenter">
                                <p>榆林市</p>
                                <p>124</p>
                                <p>121</p>
                                <p>10</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pire mt50">
                    <div class="flex selectDate flexCenter sbew">
                        <p class="active">月</p>
                        <p class="">季</p>
                        <p class="">年</p>
                    </div>
                    <div class="" id="pie">

                    </div>
                </div>

            </div>
        </div>
        <!-- 左侧 -->
        <!-- 中间 -->
        <div class="contentCenter">
            <div class="title">智慧维保电梯公共服务平台</div>
            <div class="totalList flex flexCenter">
                <div class="totalItem flex flexCenter">
                    <img th:src="@{/img/index/registrations.png}" alt="">
                    <div class="ml20">
                        <p class="totalTtitle">注册总数</p>
                        <div class="totalNumber flex flexCenter">
                            5213
                            <p class="totalCompany">部</p>
                        </div>
                    </div>
                </div>
                <div class="totalItem flex flexCenter">
                    <img th:src="@{/img/index/waringNumber.png}" alt="">
                    <div class="ml20">
                        <p class="totalTtitle">故障数</p>
                        <div class="totalNumber flex ">
                            13
                            <p class="totalCompany">部</p>
                        </div>
                    </div>
                </div>
                <div class="totalItem flex flexCenter">
                    <img th:src="@{/img/index/SleepyNumber.png}" alt="">
                    <div class="ml20">
                        <p class="totalTtitle">困人数</p>
                        <div class="totalNumber flex ">
                            2
                            <p class="totalCompany">部</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 中间 -->
        <!-- 右侧 -->
        <div class="contentRight">
            <div class="RightContain">
                <div>
                    <div class="moduleTitle flex flexCenter">
                        <img th:src="@{/img/index/titleText.png}" alt="" class="textBottom">
                        <img th:src="@{/img/index/titleIcom.png}" alt="" class="titleIcon">
                        <p class="titleText">监控动态</p>
                    </div>
                    <div class="detaiList">
                        <div class="detaiItem">
                            <img th:src="@{/img/index/textBorder.png}" alt="" class="BorderIcon">
                            <div class="ItemContemt">
                                <p>2020-10-10  12:23</p>
                                <div class="flex sbew flexCenter mt20">
                                    <p>科创大厦A座南侧10号梯</p>
                                    <div class="flex flexCenter">
                                        <img th:src="@{/img/index/waring.png}" alt="" class="warIcon">
                                        <p class="wartext">故障</p>
                                    </div>
                                </div>
                            </div>
                            <img th:src="@{/img/index/textBorder.png}" alt="" class="BorderIcon">
                        </div>
                        <div class="detaiItem">
                            <img th:src="@{/img/index/textBorder.png}" alt="" class="BorderIcon">
                            <div class="ItemContemt">
                                <p>2020-10-10  14:35</p>
                                <div class="flex sbew flexCenter mt20">
                                    <p>丽华大厦3号梯</p>
                                    <div class="flex flexCenter">
                                        <img th:src="@{/img/index/Sleepy.png}" alt="" class="warIcon">
                                        <p class="Sleepy">困人</p>
                                    </div>
                                </div>
                            </div>
                            <img th:src="@{/img/index/textBorder.png}" alt="" class="BorderIcon">
                        </div>
                        <div class="detaiItem">
                            <img th:src="@{/img/index/textBorder.png}" alt="" class="BorderIcon">
                            <div class="ItemContemt">
                                <p>2020-10-10  12:23</p>
                                <div class="flex sbew flexCenter mt20">
                                    <p>南飞鸿广场6号楼3号梯</p>
                                    <div class="flex flexCenter">
                                        <img th:src="@{/img/index/waring.png}" alt="" class="warIcon">
                                        <p class="wartext">故障</p>
                                    </div>
                                </div>
                            </div>
                            <img th:src="@{/img/index/textBorder.png}" alt="" class="BorderIcon">
                        </div>
                    </div>
                </div>

                <div class="baeHeight">
                    <div class="mt50">
                        <div class="moduleTitle mt20 flex flexCenter">
                            <img th:src="@{/img/index/titleText.png}" alt="" class="textBottom">
                            <img th:src="@{/img/index/titleIcom.png}" alt="" class="titleIcon">
                            <p class="titleText">区域救援统计</p>
                        </div>
                        <div class="bar" id="bar"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 右侧 -->
    </div>

</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-beta.2/echarts.common.js"></script>
<!--引入Javascript API GL，参数说明参见下文-->
<!--<script src="https://map.qq.com/api/gljs?v=2.exp&key=DKABZ-T2KWD-CLR4L-PEMO4-4SXSJ-TVBV6"></script>-->
<script th:src="@{/js/jquery.min.js}"></script>

<script>
    //地图初始化函数，本例取名为init，开发者可根据实际情况定义
    function initMap() {
        //定义地图中心点坐标
        var center = new TMap.LatLng(34.26667, 108.95000)
        //定义map变量，调用 TMap.Map() 构造函数创建地图
        var map = new TMap.Map(document.getElementById('container'), {
            center: center,//设置地图中心点坐标
            zoom: 17.2,   //设置地图缩放级别
            pitch: 43.5,  //设置俯仰角
            rotation: 45    //设置地图旋转角度
        });
    }
    //腾讯地图
    function init() {
        //设置地图中心点
        var myLatlng = new qq.maps.LatLng(34.185500,108.941685);
        //定义工厂模式函数
        var myOptions = {
            zoom: 15,               //设置地图缩放级别
            center: myLatlng,      //设置中心点样式
            mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
        };
        //获取dom元素添加地图信息
        var map = new qq.maps.Map(document.getElementById("container"), myOptions);
        var markPoint;
        //添加定时器(初始化地图标记点)
        setTimeout(function(){
            markPoint=new qq.maps.Marker({
                position:myLatlng,
                animation:qq.maps.MarkerAnimation.BOUNCE,
                map:map
            });
        },2000);
        //添加监听事件(鼠标点击切换标记点)
        qq.maps.event.addListener(map, 'click', function(evt) {
            if(!markPoint) {
                markPoint=new qq.maps.Marker({
                    position:evt.latLng,
                    map:map
                });
                return;
            }
            markPoint.setPosition(evt.latLng);
            console.log(evt.latLng.getLat().toFixed(6),evt.latLng.getLng().toFixed(6));
        });
    }
    //异步加载地图库函数文件
    function loadScript() {
        //创建script标签
        var script = document.createElement("script");
        //设置标签的type属性
        script.type = "text/javascript";
        //设置标签的链接地址
        script.src = "https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&callback=init";
        //添加标签到dom
        document.body.appendChild(script);
    }
    window.onload = loadScript;    // dom文档加载结束开始加载 此段代码

    var myChart = echarts.init(document.getElementById('pie'));
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            right: 10,
            top:"middle",
            textStyle: { //图例文字的样式
                color: '#fff'
            },
            data: [{
                name:"待保养",
            },{
                name:"已保养",
            },{
                name:"已逾期",
            }],

        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['10%', '80%'],
                label: {
                    show: false,
                    position: 'center'
                },
                center: ["35%", "53%"],
                labelLine: {
                    show: false
                },
                data: [
                    {value: 335, name: '待保养'},
                    {value: 310, name: '已保养'},
                    {value: 895, name: '已逾期'}
                ]
            }
        ]
    };
    myChart.setOption(option);



    var barCS = echarts.init(document.getElementById('bar'));

    var dataAxis = [  '西安市', '咸阳市', '渭南市', '延安市', '宝鸡市', '汉中市', '安康市' ,'榆林市'];
    var data = [220, 182, 191, 234, 290, 330, 310,390, ];
    var yMax = 500;

    var optionPir = {
        xAxis: {
            axisLabel: {
                textStyle: {
                    color: '#fff'
                }
            },
            axisTick: {
                show: false
            },
            splitLine:{

                show: false
            },
            axisLine: {
                show: false
            },
            z: 10
        },
        yAxis: {
            data: dataAxis,
            axisLine: {
                show: false,

            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#fff'
                }
            }
        },
        grid: {
            x: 30,
            y: 20,
            x2: 30,
            y2: 35
        },
        series: [

            {
                type: 'bar',
                height:16,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#83bff6'},
                            {offset: 0.5, color: '#188df0'},
                            {offset: 1, color: '#188df0'}
                        ]
                    )
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#2378f7'},
                                {offset: 0.7, color: '#2378f7'},
                                {offset: 1, color: '#83bff6'}
                            ]
                        )
                    }
                },
                data: data
            }
        ]
    };


    barCS.setOption(optionPir);

</script>

</html>


